<template>
    <div>
        <div class="ls-User__centent ls-card m-t-16">
            <div class="pane-header table-toolbar">
                <!-- <el-button type="text" size="small" slot="trigger" @click="refresh">刷新 </el-button> -->

                <RedEnvelopeVideoRuleDrawer
                    :title="'添加规则'"
                    mode="add"
                    :video-id="id"
                    @success="drawerSumbitSuccessHandler"
                >
                    <el-button type="primary" size="small"> 添加规则 </el-button>
                </RedEnvelopeVideoRuleDrawer>
            </div>
            <MyTable ref="my_table" :columns="columns" :list-api="tableListApi" :query-params="queryParams">
                <template v-slot:operation="{ row }">
                    <div class="flex">
                        <RedEnvelopeVideoRuleDrawer
                            :edit-info="row"
                            :title="'编辑规则'"
                            mode="edit"
                            :video-id="id"
                            @success="drawerSumbitSuccessHandler"
                        >
                            <el-button type="text"> 编辑 </el-button>
                        </RedEnvelopeVideoRuleDrawer>
                    </div>
                </template>
            </MyTable>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Ref, Vue } from 'vue-property-decorator'

import { apiVideoRuleList } from '@/api/application/red_envelope_video'
import MyDrawer from '@/components/MyDrawer/MyDrawerIndex.vue'
import MyTable from '@/components/MyTable/MyTableIndex.vue'
import { IRedEnvelopeVideoEditFormInfo, IRedEnvelopeVideoItem } from '@/interface/red_envelope_video.d'
import { PageMode } from '@/utils/type'

import RedEnvelopeVideoRuleDrawer from './red_envelope_video_rule_drawer.vue'

@Component({
    components: {
        MyTable,
        MyDrawer,
        RedEnvelopeVideoRuleDrawer
    }
})

// 红包视频
export default class RedEnvelopeVideoRuleList extends Vue {
    @Ref() readonly my_table!: MyTable
    @Prop({ default: '' }) id!: string
    tableListApi: any = apiVideoRuleList
    columns = [
        {
            prop: 'video_id',
            label: 'ID',
            width: 50
        },
        {
            prop: 'title',
            label: '标题'
        },
        {
            prop: 'date',
            label: '日期',
            sortable: true
        },
        {
            prop: 'rule',
            label: '规则',
            formatData: function (val: string | number) {
                // ,//状态 1上架 2下架
                let retVal = ''
                switch (String(val)) {
                    case '1':
                        retVal = '视频开始触发'
                        break
                    case '2':
                        retVal = '视频截止触发'
                        break
                    case '3':
                        retVal = '随机触发'
                        break
                    default:
                        retVal = ''
                }
                return retVal
            }
        },
        {
            prop: 'start_interval',
            label: '红包区间始'
        },
        {
            prop: 'end_interval',
            label: '红包区间截止'
        },
        {
            prop: 'count',
            label: '人数'
        },
        {
            prop: 'use_count',
            label: '已发放人数',
            formatData: function (val: string | number) {
                return val ? val : 0
            }
        },
        {
            prop: 'balance',
            label: '余额',
            width: 100,
            sortable: true
        },
        {
            prop: 'grant_balance',
            label: '发放总金额',
            width: 100
        },
        {
            prop: 'receive_balance',
            label: '接收总金额',
            width: 100
        },
        {
            prop: 'expire_balance',
            label: '过期总金额',
            width: 100
        },
        {
            prop: 'surplus_balance',
            label: '剩余金额',
            width: 100
        },

        {
            prop: 'operation',
            label: '操作',
            width: 100,
            'show-overflow-tooltip': false,
            scopedSlots: { customRender: 'operation' }
        }
    ]
    mode: string = PageMode.ADD
    comp = {
        add: RedEnvelopeVideoRuleDrawer,
        edit: RedEnvelopeVideoRuleDrawer,
        recharge: RedEnvelopeVideoRuleDrawer,
        rule: RedEnvelopeVideoRuleDrawer
    }
    queryParams = {
        video_id: ''
    }
    activeComponent: any = null
    baseInfoFromMode: string = PageMode.ADD
    baseInfoFromDrawerTitle = '添加红包视频'
    baseInfoFormVisible = false
    activeBaseInfo: IRedEnvelopeVideoEditFormInfo | null = null
    drawerConfirmTitle = ''
    created() {
        this.queryParams = {
            video_id: this.id
        }
    }
    openAddDrawer() {
        this.activeComponent = this.comp.add
        this.activeBaseInfo = null
        this.baseInfoFromMode = PageMode.ADD
        this.baseInfoFromDrawerTitle = '添加红包视频'
        this.baseInfoFormVisible = true
        this.drawerConfirmTitle = ''
    }
    openEditDrawer(row: IRedEnvelopeVideoItem) {
        this.activeComponent = this.comp.edit
        this.activeBaseInfo = Object.assign({}, row)
        this.baseInfoFromMode = PageMode.EDIT
        this.baseInfoFromDrawerTitle = '编辑红包视频'
        this.baseInfoFormVisible = true
        this.drawerConfirmTitle = ''
    }
    openRechargeDrawer(row: IRedEnvelopeVideoItem) {
        this.activeComponent = this.comp.recharge
        this.activeBaseInfo = Object.assign({}, row)
        this.baseInfoFromMode = PageMode.EDIT
        this.baseInfoFromDrawerTitle = '视频充值'
        this.baseInfoFormVisible = true
        this.drawerConfirmTitle = '确定'
    }
    openRuleBtnClickFun(row: IRedEnvelopeVideoItem) {
        this.activeComponent = this.comp.rule
        this.activeBaseInfo = Object.assign({}, row)
        this.baseInfoFromMode = PageMode.EDIT
        this.baseInfoFromDrawerTitle = '设置红包规则'
        this.baseInfoFormVisible = true
        this.drawerConfirmTitle = '确定'
    }

    drawerSumbitSuccessHandler() {
        this.baseInfoFormVisible = false
        // @ts-ignore
        if (this.my_table && this.my_table.refresh) {
            // @ts-ignore
            this.my_table.refresh()
        }
    }
}
</script>
